<template>
	<!-- 基本工单详情 -->
	<view class="order-de">

		<detail-top :order_detail='order_detail'></detail-top>

		<view class="order-de-c">
			<view class="order-de-c-m" style="display: flex;align-items: center;">
				<text>工单信息</text>
				<image src="../../static/a.png" mode="" style="width: 32rpx;height: 32rpx;margin-left: 10rpx;"></image>
			</view>
			<view class="order-de-c-c">
				<view class="order-de-c-c-f">
					<view class="order-de-c-c-f-l">
						工作流
					</view>
					<view class="order-de-c-c-f-r">
						{{order_bom.type_data}}
					</view>
				</view>
				<view class="order-de-c-c-f">
					<view class="order-de-c-c-f-l">
						执行人
					</view>
					<view class="order-de-c-c-f-r">
						{{order_bom.user.nickname||'暂无信息'}}
					</view>
				</view>
				<view class="order-de-c-c-f">
					<view class="order-de-c-c-f-l">
						执行时间
					</view>
					<view class="order-de-c-c-f-r">
						{{order_bom.warranty.createtime}}
					</view>
				</view>
			</view>
		</view>
		<view class="order-de-x">
			<view class="order-de-x-c">
				<view class="order-de-x-c-a">
					详细内容
				</view>
				<view class="" v-if="order_bom.type_data=='报价记录'">
					<view class="order-de-x-c-b">
						价格金额为：{{order_bom.content}}元
					</view>
					<image :src="order_bom.images" 
					@tap="preImg(order_bom.images)" :key='index'
					style="width: 100%;" mode="widthFix" alt="">
				</view>
				<block v-else>
					<view class="order-de-x-c-b">
					{{order_bom.content}}
				</view>
				<view class="order-de-x-c-c">
					<block v-if="imgs_list.length!=0">
						<view class="order-de-x-c-c-i" v-for="(item,index) in imgs_list" :key='index' @tap="preImgAnother(index)">
							<image :src="item" mode=""></image>
						</view>
					</block>
					<block v-if="viede_list">
						<view class="order-de-x-c-c-i">
							<video :src="viede_list" controls></video>
						</view>
					</block>
				</view>
			
			
				</block>
				
			</view>
		</view>
		<view class="" style="width: 100%;height: 80rpx;">

		</view>

		<!-- 立即查看 -->
		<view class="rightSee" @tap="jumpFlow">
			立即查看
		</view>
	</view>



</template>

<script>
	import changetype from '../../utils/changetype.js'
	import detailTop from '@/components/detailTop/detailTop.vue'
	export default {
		components: {
			detailTop
		},
		data() {
			return {
				imgs_list: [], //图片
				viede_list: '', //视频列表
				user_name: '', //该订单执行者
				order_detail: {}, //上半部分工单详情
				order_bom: {}, //  上半部分 最新工单详情
				show: false, //

				animationData: {},
				id: null, //工单id
				type: 0, //1首页进来工单详情   2维保详情   3报修工单详情
				warranty_id: null
			}
		},
		onLoad(e) {
			this.id = e.id //工单id
			this.type = e.type //工单类型   1首页进来工单详情   2维保详情   3报修工单详情
			this.warranty_id = e.warranty_id
			this.getNewsDetail()
			this.getDetail()
		},
		onShow() {

		},
		methods: {
			preImgAnother(e){
				let arr=[]
				arr.push(e)
				uni.previewImage({
					urls:this.imgs_list,
					current:e
				})
			},preImg(e){
				let arr=[]
				arr.push(e)
				uni.previewImage({
					urls:arr
				})
			},
			/* 最新工单详情 下半部分 */
			getDetail() {
				this.$https.post('/warranty/newestDetails', {
					workflow_id: this.id
				}).then(res => {
					this.order_bom = res.data
					this.order_bom.type_data = changetype(res.data.type_data)

					if (this.order_bom.images) { //存在照片或视频
						let images = this.order_bom.images.split(',') //字符串转数组  获取照片和视频
						console.log(images, 12);
						images.forEach(item => {

							if (item != '') {
								if (this.judgmentFile(item)) {
									this.viede_list = item //视频
								} else {
									this.imgs_list.push(item) //图片
								}
							}

						})

					}

				})
			},
			/* 医院id   */
			/* 上半部分订单详情 */
			getNewsDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.warranty_id
				}).then(res => {
					this.order_detail = res.data
					this.order_detail.type_data = changetype(res.data.type_data)
					if (this.order_detail.images) { //存在照片
					
						let images = this.order_detail.images.split(',') //字符串转数组  获取照片
						this.order_detail.imgs = []
						images.forEach(item3 => {
							this.order_detail.imgs.push(item3)
						})
					
					}
				})
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {

				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 电话 */
			numPhone() {
				console.log(this.$refs, 669);
				/* wx.makePhoneCall({
					phoneNumber:""
				}) */
			},
			/* 查看工单进度 */
			jumpFlow() {
				uni.navigateTo({
					url: '../weibaoOrder/weibaoOrder?id=' + this.order_detail.id + '&warranty_id=' + this.order_bom
						.warranty_id
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.cost {
		display: flex;
		margin-bottom: 25rpx;

		.cost-item {
			font-size: 24rpx;
			font-weight: 400;
			color: #969699;
			padding-right: 30rpx;

			.cost-item-border {
				color: #000000 !important;
			}
		}
	}

	.explain {
		&-title {
			font-size: 24rpx;
			font-weight: 500;
			color: #303030;
			margin-bottom: 22rpx;
		}

		&-content {
			background: #F6F6FB;
			border-radius: 8rpx;
			padding: 24rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #B6BDBD;
		}
	}

	.rightSee {
		position: fixed;
		left: 75rpx;
		bottom: 20rpx;
		width: 600rpx;
		margin: auto;
		height: 80rpx;
		background: #257EFA;
		border-radius: 48rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

	.getmore-enter-active {
		transition: trans;
	}

	.getmore-enter {
		opacity: 0;
	}

	.getmore-leave-active {
		transition: opacity 3s;
	}

	.getmore-leave-to {
		opacity: 0;
	}

	.order-sc {
		&-b {
			background-color: #FFFFFF;
			padding: 62rpx 48rpx;

			&-c {
				position: relative;
				padding-bottom: 32rpx;

				&-p {
					&-a {
						height: 80rpx;
						background: #F6F6FB;
						font-size: 24rpx;
						font-weight: 500;
						color: #F24C17;
						line-height: 80rpx;
					}
				}

				&-t {
					display: flex;
					justify-content: space-between;
					position: relative;

					&-l {
						font-size: 24rpx;
						font-weight: 500;
						color: #303030;
					}

					&-r {
						font-size: 20rpx;
						font-weight: 400;
						color: #969699;
					}
				}

				/* &-t::before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					top: 0px;
					left: -32rpx;
					border-radius: 50%;
					background-color: #C6C7CB;
				} */

				&-c {
					margin: 16rpx 0 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #969699;
					line-height: 36rpx;
					position: relative;

					&-p {
						color: $public-oclor;
						border-bottom: 2rpx solid $public-oclor;
					}
				}

				&-f {
					padding: 0 32rpx;

					&-t {
						font-size: 24rpx;
						font-weight: 500;
						color: $public-oclor;
						line-height: 24rpx;
						margin: 28rpx 0 26rpx;
					}

					&-i {

						&-i {
							width: 160rpx;
							height: 160rpx;
							background-color: #F5F6F8;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				/* &-c::before {
					content: '';
					width: 6rpx;
					height: 100rpx;
					position: absolute;
					top: -10rpx;
					left: -22rpx;
					background: #C6C7CB;
				} */
			}

			&-c::before {}



			&-c::after {}
		}
	}

	.order-de-mo {
		border-top: 16rpx solid #f7f8fb;
		position: relative;
		z-index: -9999;

		&-s {
			position: absolute;
			top: -16rpx;
			left: 40rpx;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-top: 20rpx solid $public-oclor;
		}
	}

	.order-de {
		&-c {
			background-color: #f7f8fb;
			border-bottom: 28rpx solid #f7f8fb;

			&-m {
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 33rpx;
				padding: 28rpx 32rpx;

			}

			&-c {
				background-color: #FFFFFF;

				&-f {
					display: flex;
					justify-content: space-between;
					padding: 28rpx 32rpx;
					align-items: center;
					border-bottom: 2rpx solid #f7f8fb;

					&-l {
						font-size: 28rpx;
						font-weight: 500;
						color: #3B3D3D;
					}

					&-r {
						font-size: 24rpx;
						font-weight: 400;
						color: #3B3D3D;
					}
				}
			}
		}


		&-x {
			padding: 0 32rpx;

			&-c {
				&-a {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					margin: 20rpx 0 28rpx;
				}

				&-b {
					font-size: 24rpx;
					font-weight: 400;
					color: #3B3D3D;
					margin-bottom: 32rpx;
				}

				&-c {
					padding-bottom: 42rpx;

					&-i {
						width: 160rpx;
						height: 160rpx;
						background-color: #f5f6f8;
						margin-right: 10rpx;
						display: inline-block;
						border-radius: 4rpx;
						overflow: hidden;

						video {
							width: 100%;
							height: 100%;
						}

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.or-hi {
		width: 6rpx;
		height: 100%;
		position: absolute;
		top: 10rpx;
		left: -25rpx;
		background: #C6C7CB;
	}

	.or-hi::before {
		content: '';
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		left: -8rpx;
		border-radius: 50%;
		background-color: #C6C7CB;
	}


	.order-sc-b-c:nth-child(1) .or-hi {
		color: $public-oclor !important;
		background-color: $public-oclor !important;
	}

	.order-sc-b-c:nth-child(1) .or-hi::before {
		background-color: $public-oclor !important;
		border: 2rpx solid #fff;
	}

	.order-sc-b-c-p-c {
		background: #F6F7FB;
		margin-top: 20rpx;
		padding: 16rpx;

		.order-pri {
			display: flex;

			&-a {
				color: #969699;
				font-size: 24rpx;


			}

			&-b {
				color: #000000;
			}
		}
	}

	.order-sc-b-c-p-c>.order-pri:nth-child(2) {
		padding: 24rpx 0 38rpx;
		color: teal;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1) {
		padding-right: 150rpx;
		position: relative;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1)::before {
		content: '';
		width: 4rpx;
		height: 100%;
		position: absolute;
		right: 75rpx;
		background-color: rgba(0, 0, 0, 0.06);
	}

	.order-sc-b-c-p-c>.order-pri-a:nth-child(3) {
		padding: 34rpx 0 24rpx;
		border-top: 4rpx solid rgba(0, 0, 0, 0.06);
	}
</style>
